<template>
  <!-- 商品列表 -->
  <div class="sort-list-container">
    <!-- 对数据进行遍历渲染 -->
    <ul>
      <li v-for="good in goodList" :key="good.id">
        <!-- 上方遍历,拿到每个good值,给子组件进行传值,子组件进行渲染 -->
        <GoodsItem :goods="good" />
      </li>
    </ul>

    <!-- 导入上拉加载(全局组件) -->
    <!-- 一但进入可视区,就会触发load事件 -->
    <XtxInfiniteLoad
      :isLoading="isLoading"
      :isFinished="isFinished"
      @load="loadNextPage"
    />
  </div>
</template>

<script>
// 导入商品列表
import GoodsItem from './goods-item.vue'
// 导入筛选商品数据API
import { findSubCategoryGoods } from '@/api/category'
// 导入vue-route函数
import { useRoute } from 'vue-router'
// 导入vue函数
import { ref, inject, watch } from 'vue'

export default {
  // 注册组件
  components: {
    GoodsItem
  },

  setup () {
    // 定义商品列表
    const goodList = ref([])
    // 获取router实例
    const route = useRoute()
    // 上拉加载更多数据
    const isLoading = ref(false)
    // 上拉加载是否完成
    const isFinished = ref(false)

    // 定义请求的数据(因为请求的参数过多,所以在外部就提前定义下,传参方便)
    const reqParams = {
      page: 0,
      pageSize: 20,
      categoryId: route.params.id,
      // 筛选条件数据
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    }

    // 接受上层DOM的过滤条件数据
    const filterParams = inject('filterParams')
    // 监听(监听筛选条件的变动)
    watch(
      () => filterParams.value,
      (newVal) => {
        console.log('筛选条件变了,', newVal)
        /***
         * 1-合并参数(合并最新的过滤条件)
         * 2-拿到最新参数发请求
         */
        goodList.value = []
        // 开始之前就把页码归为0
        reqParams.page = 0
        // 是否加载完成,定义为false
        isFinished.value = false

        // const newReqParams = { ...reqParams, ...newVal }
        // // 发请求,获取商品列表
        // getGoodList(newReqParams)
      },
      // 深度监听
      { deep: true }
    )

    // // 调用获取商品列表API
    // const getGoodList = async (Params) => {
    //   const { result } = await findSubCategoryGoods(Params)
    //   //   console.log('列表:', result)
    //   // 拿到数据赋值
    //   goodList.value = result.items
    // }

    // 下拉加载下一页数据
    const loadNextPage = async () => {
      /**
       * 1.把列表状态修改为加载中  isLoading = true,页码+1
       * 2.发请求
       * 3.请求完毕,isLoading = false, 代表列表加载完成
       * 4.判断列表数据是否加载完成 --> 如果加载完成, isFinished 改为 true
       */
      isLoading.value = true
      reqParams.page++
      // 调用获取商品列表API
      const { result } = await findSubCategoryGoods(
        {
          ...reqParams,
          ...filterParams.value
        }
      )
      //   console.log('列表:', result)
      // 追加数据,,拿到数据赋值,先展开,push到最后,拼接在一起
      goodList.value.push(...result.items)
      // 上拉加载改为false
      isLoading.value = false
      // 如果列表的长度,等于所有数据的总数,加载完成
      if (goodList.value.length === result.counts) {
        // 加载完了
        isFinished.value = true
      }
    }

    // // 挂载
    // onMounted(() => {
    //   // 调用商品列表Api
    //   getGoodList(reqParams)
    // })

    // return返还给html
    return { goodList, isLoading, isFinished, loadNextPage }
  }
}
</script>

<style lang="less" scoped>
.sort-list-container {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
